<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="./QF.js"></script>
    <script>
        // 当浏览器访问本服务器的页面 URL: http://10.30.153.72:3000/16_解决跨域问题.html
        // 这个页面会成功响应
        // 浏览器会解析当前页面并执行JS代码
        // 执行代码的过程中遇到了下面的QF.get() 于是就执行 执行结果就是向 10.30.153.75（其它服务器）发送了请求
        // 浏览器允许发送这个请求 但是响应的数据回来的时候会拦住它
        // 这就是因为同源策略
        // 报错信息：
        // Access to XMLHttpRequest at 'http://10.30.153.75:3000/lession02/getStudentsName?id=2201' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

        // QF.get("http://10.30.153.75:3000/lession02/getStudentsName", {id: 2201}, function(data) {
        //     console.log(data)
        // })


    </script>
    <script>
        // 于是我们开始思考如何解决跨域？
        // 静态资源不受限制 于是 就有人使用静态标签发送动态接口请求
    </script>
    <script>
        function fun(data) {
            console.log(data)
        }
    </script>

    <script src="http://10.30.153.75:3000/lession02/getStudentsName?id=2201"></script>
    <script>
        // 上一个script标签直接使用src指向了接口地址 浏览器会误以为请求回来的是一个script脚本代码 
        // 于是就允许通过 数据 =>  {"error":0,"data":["李杰","孙顺","陈宇",...],"message":"请求成功"} 就成功到达了我们的浏览器中 但是遇到一个问题就是因为script标签请求回来的 被当作JS代码执行
        // 而一个 {a: 1, b: 2, c: 3, ...} 这样的代码直接放在全局中执行会报语法错
        // 所以我们就让对方的后端 不要直接返回这个对象 而是返回 fun({"error":0,"message":"请求成功"})  这样子的内容 这样的内容到JS中执行就被当成 函数的调用
        // 这种情况下 如果函数不存在还是会报错
        // 所以我们必须得提前定义好这个函数

        // 这种跨域方式叫做JSONP  JSON + Padding 


        // 跨域方式不止一种 
        // 1 JSONP
        // 2 服务端代理
        // 3 CORS   Cross  Origin  Resource Share 跨域资源共享策略

    </script>
</body>

</html>